<script setup>
import { computed } from 'vue'

const props = defineProps({
  eyebrow: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    default: '',
  },
  maxWidth: {
    type: String,
    default: 'max-w-3xl',
  },
})

const wrapperClass = computed(() => [
  props.maxWidth,
  'min-h-[220px] flex flex-col justify-center gap-6',
])
</script>

<template>
  <header :class="wrapperClass">
    <p
      v-if="props.eyebrow"
      class="text-sm font-semibold tracking-tight text-primary-600 dark:text-primary-400"
    >
      {{ props.eyebrow }}
    </p>
    <h1 class="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
      {{ props.title }}
    </h1>
    <p
      v-if="props.description"
      class="text-base text-zinc-600 dark:text-zinc-400"
    >
      {{ props.description }}
    </p>
    <div v-if="$slots.default" class="space-y-6">
      <slot />
    </div>
  </header>
</template>

<script>
export default {
  name: 'PageHero',
}
</script>

